<template>
	<view class="">
		
		<view class="checkout">
			<view class="checkout-header radius-16">
				<view class="checkout-header-title">
					<text>{{goods_name}}</text>
				</view>
				<view class="checkout-header-text">
					<text>库存：{{goods_total}}</text>
				</view>
				<view class="checkout-header-box">
					<view class="checkout-header-box-price">
						<text class="icon">¥</text>
						<text>{{goods_price}}</text>
					</view>
					<view class="checkout-header-box-num">
						<!-- <text class="num">购买数量</text> -->
						<!-- <u-number-box v-model="number" integer buttonSize="50rpx" inputWidth="50rpx" :iconStyle="{fontSize: '24rpx'}"></u-number-box> -->
						<uni-number-box v-model="number" :min="1" :max="99999"></uni-number-box>
					</view>
				</view>
			</view>
			
			<view class="checkout-extra radius-16"
			v-if="type == 1">
				<view class="checkout-extra-title">
					<text>收件人信息</text>
				</view>
				<view class="checkout-extra-box">
					<view class="checkout-extra-box-item">
						<view class="checkout-extra-box-item-left">
							<view class="checkout-extra-box-item-label">
								<text class="require">*</text>
								<text>联系人</text>
							</view>
							<view class="checkout-extra-box-item-text">
								<input v-model="form.username" type="text" placeholder="请输入联系人" />
							</view>
						</view>
					</view>
					<view class="checkout-extra-box-item mobile">
						<view class="checkout-extra-box-item-left">
							<view class="checkout-extra-box-item-label">
								<text class="require">*</text>
								<text>联系电话</text>
							</view>
							<view class="checkout-extra-box-item-text">
								<!-- <text class="arae" 
								@click="navTo('/homePage/arae/index')"> {{ '+' + form.araeCode || '+86' }}</text> -->
								<input v-model="form.mobile" type="number" placeholder="请输入联系电话" />
							</view>
						</view>
					</view>
					<view class="checkout-extra-box-item">
						<view class="checkout-extra-box-item-left">
							<view class="checkout-extra-box-item-label">
								<text class="require">*</text>
								<text>地址</text>
							</view>
							<view class="checkout-extra-box-item-text">
								<input v-model="form.address" type="text" placeholder="请输入地址" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mt-md pl-lg pr-lg fill-base radius-16"
			v-else>
				<view class="flex-between b-1px-b">
					<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>联系人</view>
					<input v-model="form.username" type="text" class="item-input flex-1" maxlength="20"
						placeholder="请输入联系人" />
				</view>
				<view class="flex-between">
					<view class="item-text flex-y-center"><i class="iconfont icon-required c-warning"></i>联系电话</view>
					<input v-model="form.mobile" type="number" class="item-input flex-1"
						placeholder="请输入联系电话" />
				</view>
			</view>
			
			<view class="mt-md pd-lg fill-base radius-16">
				<view class="flex-between pb-lg">
					<view class="flex-y-baseline">
						<view class="f-title c-title text-bold">订单备注</view>
						<view class="f-paragraph c-caption ml-sm">(选填)</view>
					</view>
				</view>
				<view class="f-caption c-caption fill-body radius-16">
					<textarea v-model="form.remark" class="item-textarea f-paragraph pd-lg" style="height: 100rpx;"
						placeholder-class="f-paragraph" maxlength="100" placeholder="输入订单备注" />
					<view class="text-right pb-lg pr-lg">{{form.remark.length>100?100:form.remark.length}}/100
					</view>
				</view>
			</view>
			
			<view class="mt-md fill-base radius-16">
				<view @tap.stop="toChangeItem(index,2)" class="flex-between pt-lg pb-lg ml-lg mr-lg"
					:class="[{'b-1px-t':index!=0}]" v-for="(item,index) in payList" :key="index">
					<view class="flex-y-center f-title c-title">
						<i class="iconfont mr-md" :class="item.icon"
							:style="{color:item.id==1?primaryColor:'',fontSize:'50rpx'}"></i>
						{{item.title}}
						<!-- <view class="f-paragraph c-caption ml-md" v-if="item.id == 2">余额{{balance || 0}}元</view> -->
					</view>
					<view class="flex-y-center c-caption" :style="{color:payInd == index ? primaryColor:''}">
						<i class="pay-icon iconfont icon-xuanze mr-sm"
							:class="[{'icon-radio-fill':item.is_disabled || payInd == index}]"></i>
					</view>
				</view>
			</view>
			
			<view class="checkout-tip radius-16">
				<view class="checkout-tip-title">
					<text class="tn-icon-tip"></text>
					<text>温馨提示</text>
				</view>
				<view class="checkout-tip-box">
					<!-- <text>该订单为{{type==1?'物流':'非物流'}}订单，</text> -->
					<text>请慎重填写并核对下单信息，如有疑问请</text>
					<button open-type="contact" class="shareBtn">联系客服</button>
				</view>
			</view>
			
			<view @tap.stop="isAgree=!isAgree"
				class="mt-md pd-lg fill-base f-paragraph c-title flex-y-center radius-16">
				<i class="iconfont mr-sm" :class="isAgree?'icon-xuanze-fill':'icon-xuanze'"
					:style="{color:isAgree?primaryColor:''}"></i>
				我已阅读并同意<view @tap.stop="$refs.show_rule_item.open()" :style="{color:primaryColor}">《平台交易规则》</view>
			</view>
			
			<!-- <view class="space-max-footer"></view> -->
			
			
			
		</view>
		
		<!-- <view class="tabbar">
			<view class="tabbar-price">
				<text>总价：</text>
				<text class="icon">¥</text>
				<text class="num">{{payPrice}}</text>
			</view>
			<view class="tabbar-box" :style="{background: primaryColor}"
			@click="handleSubmit">
				<text>提交</text>
			</view>
		</view> -->
		
		<view class="pay-info fix flex-between text-right pl-lg pr-lg fill-base blur-12">
			<view class="flex-y-center f-paragraph c-title text-bold ml-sm mr-lg">合计：
				<view class="flex-y-baseline f-title c-warning">¥{{payPrice}}</view>
			</view>
			<auth :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
				:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="handleSubmit" style="width: 182rpx;">
				<view class="pay-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
					立即支付</view>
			</auth>
		</view>
		
		
		
	</view>
</template>

<script>
	// import * as IndexApi from "@/api/index"
	// import * as OrderApi  from "@/api/order"
	
	// import {wxPayment} from '@/utils/app'
	// import PayTypeEnum from '@/common/enum/order/PayType'
	
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	
	export default {
		components: {
			
		},
		
		data() {
			return {
				
				// PayTypeEnum, 		// 支付方式
				// curPayType: PayTypeEnum.WECHAT.value,	// 当前选定的支付方式
				
				type: 1, // 1物流 2无需物流
				goods_id: undefined,
				goods_name: undefined,
				goods_price: undefined,
				goods_total: undefined,
				
				number: 1,
				
				form: {
					username: undefined,
					mobile: undefined,
					address: undefined,
					remark: '',
				},
				
				// 1微信支付；2余额支付；3支付宝支付
				payList: [{
					id: 1,
					icon: 'iconweixinzhifu1',
					title: '微信支付'
				}, {
					id: 2,
					icon: 'iconqianbao c-balance',
					title: '账户余额',
					is_disabled: false
				}],
				payInd: 0,
				balanceInd: 1,
				balance: 0,
				
				isAgree: false
				
			}
		},
		
		// computed: {
		// 	payPrice() {
		// 		return parseFloat(this.number * this.goods_price).toFixed(2)
		// 	},
			
		// 	currentDate() {
		// 		const currentDate = new Date();
		// 		const year = currentDate.getFullYear();
		// 		const month = currentDate.getMonth() + 1;
		// 		const day = currentDate.getDate();
		// 		console.log(`${year}-${month}-${day}`);
		// 		return `${year}-${month}-${day}`
		// 	},
			
		// },
		
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
			
			payPrice() {
				return parseFloat(this.number * this.goods_price).toFixed(2)
			},
		}),
		
		onLoad(options) {
			if(options && options.goods_id) {
				
				this.type = options.type
				
				this.goods_id = options.goods_id
				this.goods_name = options.goods_name
				this.goods_price = options.goods_price
				this.goods_total = options.goods_total
			}
			
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			
			// let {
			// 	alipay_status = 0,
			// 		near_time = {
			// 			str: '',
			// 			text: ''
			// 		},
			// 		user_cash: balance
			// } = data
			// if (alipay_status) {
			// 	// #ifndef MP-WEIXIN
			// 	let pay = this.payList.findIndex(item => {
			// 		return item.id == 3
			// 	})
			// 	if (pay === -1) {
			// 		this.payList.splice(1, 0, {
			// 			id: 3,
			// 			icon: 'icon-alipay c-alipay',
			// 			title: '支付宝支付'
			// 		})
			// 		this.balanceInd = 2
			// 	}
			// 	// #endif
			// }
			
			// let {
			// 	balanceInd
			// } = this
			// this.payList[balanceInd].is_disabled = this.payPrice * 1 < this.payPrice * 1
			
		},
		
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo']),
			
			handleSubmit() {
				if(!this.validateForm()) return false
				
				console.log('验证成功')
				this.onSubmit()
			},
			
			
			// async goodsInfoCall() {
			// 	this.$util.showLoading()
			// 	let {
			// 		id
			// 	} = this.options
			// 	this.OrderInfo = await this.$api.technician.goodsInfo({
			// 		id
			// 	})
			// 	this.isLoad = true
			// 	this.$util.hideAll()
			// },
			
			onSubmit() {
				
				uni.showLoading({
					mask: true
				})
				
				this.$api.order.createGoodOrder(
				{
					...this.form,
					goods_id: this.goods_id,
					type: this.type,
					number: this.number,
					payType: this.payList[this.payInd].id
				})
				.then(response => {
					console.log('支付信息', response)
					this.onSubmitCallback(response)
				})
				.catch(() => uni.hideLoading())
				.finally(() => {
					
				})
			},
			
			// 订单提交成功后回调
			async onSubmitCallback(result) {
				
				uni.hideLoading()
				
				let {
					pay_list,
					order_id = 0
				} = result
				
				let pay_model = this.payList[this.payInd].id
				
				// 微信/支付宝支付
				if (pay_list) {
					if (pay_model == 3) {
						pay_list = {
							orderInfo: pay_list,
							provider: 'alipay'
						}
					}
					// #ifdef H5
					if (pay_model == 3) {
						pay_list = Object.assign({}, pay_list, {
							order_id,
							page_url: `/technician/pages/shop/order?tab=2`
						})
						this.updateOrderItem({
							key: 'alipayOrderParams',
							val: pay_list
						})
						this.$util.goUrl({
							url: '/user/pages/alipay-result',
							openType: `redirectTo`
						})
						return
					}
					// #endif
				
					try {
						await this.$util.pay(pay_list)
						this.$util.showToast({
							title: `支付成功`
						})
						setTimeout(() => {
							// this.lockTap = false
							this.$util.goUrl({
								url: '/technician/pages/shop/order?tab=2',
								openType: `redirectTo`
							})
						}, 1000)
					} catch (e) {
						this.$util.showToast({
							title: `支付失败`
						})
						setTimeout(() => {
							// this.lockTap = false
							this.$util.goUrl({
								url: '/technician/pages/shop/order?tab=1',
								openType: `redirectTo`
							})
						}, 1000)
					}
					return
				}
				// 余额支付/零元支付
				this.$util.showToast({
					title: `支付成功`
				})
				setTimeout(() => {
					// this.lockTap = false
					this.$util.goUrl({
						url: '/technician/pages/shop/order?tab=2',
						openType: `redirectTo`
					})
				}, 1000)
			},
			
			// 跳转到我的订单(等待1秒)
			navToMyOrder() {
				setTimeout(() => {
					uni.$u.route('/personPage/order/index')
				}, 1000)
			},
			
			
			// errorMsg参数，提升了适用性
			isNotNull: function(value, regType=1) { //去空字符，不为空
				// regType 2去除所有空格
				if (regType == 2 && value) {
					value = value.replace(/(^\s*)|(\s*$)/g, "")
				}
				if (value === '' || value === null || value === undefined || value === false || JSON.stringify(value) === '[]' || JSON.stringify(value) === '{}' || JSON.stringify(value) === 'null') {
					// 返回字符串true  错误信息
					return false;
				}
				
				return true
			},
			
			isMobile: function(value, errorMsg) {
				//   if (!/^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7}|([0-9]{3,4}-)?[0-9]{7,8})$/.test(value)) { //电话号码校验
				if (value == null || value == '' || value.length < 1) {
					return false;
				} else if (!/^(1[0-9]{10})$/.test(value)) { //电话号码校验
					return `${value} 手机号无效`;
					
					return false;
				}
				
				return true
			},
			
			validateForm() {
				
				// 验证协议
				if(!this.isNotNull(this.isAgree)) {
					uni.showToast({
						icon: 'none',
						title: "请勾选协议"
					})
					return false
				}
				
				
				if(!this.isNotNull(this.form.username)) {
					// uni.$u.toast('请填写联系人')
					uni.showToast({
						icon: 'none',
						title: "请填写联系人"
					})
					return false
				}
				
				if(!this.isNotNull(this.form.mobile)) {
					// uni.$u.toast('请填写联系电话')
					uni.showToast({
						icon: 'none',
						title: "请填写联系电话"
					})
					return false
				}
				if(!this.isMobile(this.form.mobile)) {
					// uni.$u.toast('请填写正确的联系电话')
					uni.showToast({
						icon: 'none',
						title: "请填写正确的联系电话"
					})
					return false
				}
				
				if(this.type == 1) {
					if(!this.isNotNull(this.form.address)) {
						// uni.$u.toast('请填写地址')
						uni.showToast({
							icon: 'none',
							title: "请填写地址"
						})
						return false
					}
				}
				
				return true
			},
			
			// 跳转到页面
			navTo(url, param) {
				uni.$u.route(url, param);
			},
			
			// 选择出行方式/支付方式/服务方式
			async toChangeItem(index, key = 1) {
				let {
					balanceInd
				} = this
				if (index == balanceInd && this.payList[balanceInd].is_disabled) return
				this.payInd = index
			},
		},
		
	}
</script>

<style lang="scss">
	
	page {
		background-color: #F9F9F9;
	}
	
	.shareBtn {
		color: #4a8bff;
		font-size: inherit;
		border-radius: inherit;
		padding: 0;
		margin: 0;
		background-color: inherit;
		line-height: inherit;
		
		&::after {
			content: none;
		}
		&::before {
			content: none;
		}
	}
	
	.blur-12 {
		backdrop-filter: blur(12rpx);
		background-color: rgba(255, 255, 255, .6);
		box-shadow: 0 -10rpx 25rpx rgba(0, 0, 0, .05);
	}
	
	
	/deep/ .u-number-box__minus, /deep/ .u-number-box__plus{
		width: 50rpx;
	}
	
	.checkout {
		padding: 20rpx 30rpx;
		padding-bottom: 200rpx;
		
		&-header {
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0 0 25rpx rgba(0, 0, 0, .05);
			
			&-title {
				font-size: 32rpx;
				color: #333;
			}
			
			&-text {
				margin-top: 10rpx;
				
				& text {
					font-size: 24rpx;
					color: #4a8bff;
					background-color: rgba(74,139,255, .15);
					padding: 2rpx 10rpx;
					border-radius: 10rpx;
				}
				
			}
			
			&-box {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				&-price {
					font-size: 36rpx;
					color: #F44336;
					
					& .icon {
						font-size: 28rpx;
						margin-right: 10rpx;
					}
				}
				
				&-num {
					display: flex;
					align-items: center;
					
					& .num {
						font-size: 24rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
		
		&-extra {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0 0 25rpx rgba(0, 0, 0, .05);
			
			&-title {
				font-size: 32rpx;
				color: #333;
				
				&-tip {
					margin-top: 10rpx;
					font-size: 24rpx;
					
					& .num {
						color: #4a8bff;
					}
				}
			}
			
			&-box {
				margin-top: 20rpx;
				
				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 90rpx;
					border-top: 1rpx solid rgba(0, 0, 0, .05);
					
					&:first-child {
						border: none;
					}
					
					&-left {
						flex: 1;
						display: flex;
						align-items: center;
						
					}
					
					&-right {
						flex-shrink: 0;
					}
					
					&-label {
						font-size: 28rpx;
						color: #333;
						width: 160rpx;
						flex-shrink: 0;
						
						& .require {
							color: #F44336;
							margin-right: 5rpx;
						}
					}
					
					& picker {
						flex: 1;
					}
					
					&-text {
						flex: 1;
						font-size: 28rpx;
						color: #787878;
						
						& input {
							font-size: inherit;
							color: inherit;
							line-height: inherit;
							height: inherit;
							min-height: unset;
						}
					}
				}
				
				
				.mobile {
					
					& .checkout-extra-box-item-text {
						display: flex;
						align-items: center;
						
						& .arae {
							// width: 100rpx;
							overflow: hidden;
							white-space: nowrap;
							margin-right: 10rpx;
						}
						
						& input {
							line-height: inherit;
							height: inherit;
							min-height: unset;
						}
					}
				}
				
				&-no {
					// padding: 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #4a8bff;
					border-radius: 20rpx;
					text-align: center;
					font-size: 28rpx;
					color: #4a8bff;
					
					& .icon {
						margin-right: 20rpx;
						font-size: 30rpx;
					}
				}
				
				&-user {
					display: flex;
					align-items: center;
					background-color: rgba(0, 0, 0, .07);
					padding: 20rpx;
					border-radius: 10rpx;
					
					&-left {
						flex-shrink: 0;
						font-size: 32rpx;
						color: #787878;
						margin-right: 40rpx;
					}
					&-right {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						&-label {
							font-size: 28rpx;
							color: #333;
						}
						
						&-text {
							font-size: 24rpx;
							color: #787878;
						}
					}
				}
				
			}
		}
		
		&-tip {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: rgba(255,152,0, .15);
			color: #d57f00;
			box-shadow: 0 0 25rpx rgba(0, 0, 0, .05);
			
			font-size: 24rpx;
			
			&-title {
				margin-bottom: 10rpx;
				font-size: 28rpx;
			}
			
			&-box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
		}
		
		
	}
	
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		
		background-color: rgba(255, 255, 255, .6);
		backdrop-filter: blur(12rpx);
		z-index: 996;
		box-shadow: 0 -10rpx 25rpx rgba(0, 0, 0, .05);
		
		display: flex;
		align-items: center;
		
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		
		&-price {
			flex: 1;
			font-size: 28rpx;
			
			& .icon {
				font-size: 24rpx;
				margin: 0 10rpx;
				color: #F44336;
			}
			
			& .num {
				font-size: 36rpx;
				color: #F44336;
			}
		}
		
		&-box {
			flex-shrink: 0;
			width: 300rpx;
			color: #fff;
			background-color: #4a8bff;
			text-align: center;
			border-radius: 50rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
		}
	}
	
	.userPopup {
		padding-top: 30rpx;
		background-color: #F9F9F9;
		
		&-title {
			padding: 0 30rpx;
			font-size: 32rpx;
			color: #333;
			text-align: center;
		}
		
		&-box {
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			margin-top: 20rpx;
			height: 900rpx;
			overflow-y: scroll;
			
			&-list {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
				
				&:first-child {
					margin-top: 0;
				}
			}
			
			&-item {
				display: flex;
				align-items: center;
				border-top: 1rpx solid rgba(0, 0, 0, .05);
				height: 90rpx;
				
				&:first-child {
					border-top: none;
				}
				
				&-label {
					font-size: 28rpx;
					color: #333;
					width: 160rpx;
					flex-shrink: 0;
						
					& .require {
						color: #F44336;
						margin-right: 5rpx;
					}
				}
				
				&-tip {
					font-size: 24rpx;
					color: #787878;
					margin: 10rpx;
				}
				
				& picker {
					flex: 1;
				}
				
				&-text {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					
					& input {
						font-size: inherit;
						color: inherit;
						line-height: inherit;
						height: inherit;
						min-height: unset;
					}
				}
			}
			
			&-title {
				margin-top: 10rpx;
				
				&-label {
					font-size: 28rpx;
					font-weight: 600;
				}
				&-text {
					font-size: 24rpx;
					color: #787878;
					margin: 10rpx 0;
				}
			}
			
			& .file {
				border-top: none;
				display: block;
				margin-top: 20rpx;
				height: auto;
				
				& .userPopup-box-item-text {
					margin-top: 20rpx;
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #787878;
					border: 1rpx solid rgba(0, 0, 0, .1);
					border-radius: 10rpx;
					font-size: 24rpx;
					text-align: center;
				}
			}
			
			& .upload {
				display: block;
				height: auto;
				padding: 20rpx 0;
				
				& .userPopup-box-item-text {
					margin-top: 20rpx;
					height: auto;
					border: none;
					width: 100%;
					
				}
			}
		}
		
		&-btn {
			// margin-top: 100rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 -5rpx 25rpx rgba(0, 0, 0, .1);
			
			&-box {
				border-radius: 50rpx;
				text-align: center;
				color: #fff;
				background-color: #4a8bff;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
	
	
	.item-text {
		width: 200rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #1F1F1F;
	}
	
	.item-input {
		min-height: 30rpx;
		line-height: 30rpx;
		padding: 25rpx 0;
		font-size: 26rpx;
		color: #A9A9A9;
	}
	
	.item-input.text {
		padding: 30rpx 0;
	}
	
	.list-item {
		.item-img {
			width: 140rpx;
			height: 140rpx;
		}
	
		.ellipsis {
			max-width: 466rpx;
		}
	
		.item-tag {
			width: 100rpx;
			height: 36rpx;
			margin-top: -18rpx;
		}
	
		.iconyduixingxingshixin {
			font-size: 28rpx;
		}
	
		.item-btn {
			width: 129rpx;
			height: 54rpx;
		}
	}
	
	.pay-info {
		height: 110rpx;
		bottom: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	
		.pay-btn {
			width: 182rpx;
			height: 74rpx;
		}
	}
	
	.popup-rule {
		width: 680rpx;
		height: auto;
	
		.rule-text {
			min-height: 300rpx;
			max-height: 60vh;
		}
	
		.iconfont {
			font-size: 60rpx;
		}
	}
	
	.popup-time {
		.time-list {
			width: calc(100% - 20rpx);
			max-height: 70vh;
			padding: 30rpx 10rpx;
	
			.time-item {
				width: 162rpx;
				height: 110rpx;
				color: #C7C7C7;
				background: #E5E5E5;
				border-radius: 16rpx;
				border: 1px solid #E5E5E5;
				margin: 10rpx;
			}
	
			.can-choose {
				color: #5A677E;
				background: #FFFFFF;
			}
	
			.cur-check {
				color: #fff;
			}
		}
	}
	
</style>